<template>
  <div class="order-list">
    <!-- 空内容 -->
    <van-empty v-if="list.length===0 && !error && !loading" description="暂无信息哦" />
    <!-- 有内容 -->
    <van-pull-refresh
        v-model="refreshLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <!-- 列表 -->
        <van-list v-model="loading" :immediate-check="false" :error.sync="error" :finished="finished" :finished-text="list.length ? '没有更多了':''"  @load="initData">
          <order-item @update="updateList" v-for="item in list" :key="item.id" :item="item"></order-item>
        </van-list>
      </van-pull-refresh>
  </div>
    
</template>
<script>
import { getOrderList } from '@/api/order'
import OrderItem from './order-item'
export default {
  components: {
    OrderItem,
  },
  props: {
    // 订单状态
    status: {
      type: [Number,String],
      required:true
    },
  },
  name:'OrderList',
  data() {
    return {
      refreshLoading: false, // 刷新loading
      list: [],
      query:{
        pageNum:1,
        pageSize:3,
        status:this.status
      },
      loading:false,
      finished:false,
      error:false,
      total:0 
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 刷新事件
    async onRefresh() {
      ////////////重置逻辑/////////////
      this.list = []
      this.total = 0
      this.query.pageNum = 1
      this.loading = false
      this.finished = false
      this.error =false
      /////////////重新拉取/////////////////
      await this.initData()
      this.refreshLoading = false
    },
     // 初始化数据
    async initData(){
      this.loading = true
      try {
        let {list=[],total} = await getOrderList(this.query)
        // 处理规格
        list = list.map(item=>{
          item.orderItemList = item.orderItemList.map(val=>{
            val.productAttr = JSON.parse(val.productAttr)
            if(val.productAttr.length){
              val.productAttr = val.productAttr.map(v=>{
                return v.key+':'+v.value
              }).join(',')
            }else{
              val.productAttr = ''
            }
            return val
          })
           return item 
        })
        this.list.push(...list)
        this.total = total
        if(list.length < this.query.pageSize){
          this.finished = true
        }else{
          this.query.pageNum++
        }
      } catch (error) {
        console.log(error);
        this.error = true
      }
      this.loading = false
    },
    // 更新列表
    updateList({type,id}){
      // if(type === 'del'){  // 删除订单
      //   this.list = this.list.filter(item=>item.id !== id*1)
      // }else if(type === 'cancel'){  // 取消订单
      //   this.list = this.list.map(item=>{
      //     if(item.id === id *1 ) item.status = 4
      //     return item
      //   })
      // }else if(type === 'receive'){  // 确认收货
      //   this.list = this.list.map(item=>{
      //     if(item.id === id *1 ) item.status = 3
      //     return item
      //   })
      // }
      if(type === 'del'){  // 删除订单
        this.list = this.list.filter(item=>item.id !== id*1)
      }else{
        this.onRefresh()
      }
    }
  },
}
</script>

<style socped lang="less">
</style>